<template>
  <div class="info">
    <el-dialog title="上传图像" :visible.sync="visible">
      <el-row :gutter="10" justify="center">
        <el-col style="text-align:center">
          <el-upload
            name="multipartFile"
            ref="upload"
            class="upload-demo"
            :limit="1"
            action="http://150.158.157.233:8081/oss/addAvatar"
            drag
            :file-list="file"
            accept=".jpg, .jpeg, .png, .gif, .bmp, .pdf, .JPG, .JPEG, .PBG, .GIF, .BMP, .PDF"
            multiple
            :auto-upload="false"
            :on-success="onSuccess"
          >
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">
              将文件拖到此处，或
              <em>点击上传</em>
            </div>
            <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
          </el-upload>
        </el-col>
      </el-row>
      <div slot="footer" class="dialog-footer">
        <el-button @click="visible = false">取 消</el-button>
        <el-button type="primary" @click="uploadAvatar">确 定</el-button>
      </div>
    </el-dialog>
    <el-row>
      <el-col :span="5">
        <div class="avatar" @click="visible=true">
          <img :src="avatar" alt />
          <el-row class="imgUploadBtn">
            <el-col>
              <span>
                <i class="el-icon-camera"></i>
              </span>
            </el-col>
          </el-row>
        </div>
      </el-col>
      <el-col :span="19" type="flex">
         
          
            <el-col :span="6">
              <span class="username">{{username}}</span>
            </el-col>
            <el-col :span="18">
              <span class="editButton" @click="go">
                <i class="el-icon-edit"></i>
                编辑资料
              </span>
            </el-col>
          

          <el-col   >
            <div class="intro">
              <span >{{intro}}</span>
            </div>
              
            
          </el-col>
       
      </el-col>
    </el-row>
    <div class="container">
      <el-row :gutter="10">
        <el-col>
          <el-tabs v-model="active" @tab-click="handleClick">
            <el-tab-pane :name="r.id" :label="r.moduleName" v-for="r in relations" :key="r.index">
              <Card v-for="v in modules" :key="v.index" :domain="v"></Card>
            </el-tab-pane>
          </el-tabs>
        </el-col> 
      </el-row>
    </div>
  </div>
</template>
<script>
import { mapGetters } from "vuex";
import Card from "@/components/myCard";
import { getAll } from "@/api/relationship";
import { selectModuleByUserIdAndRelationId } from "@/api/module";
import { getAllPicture } from "@/api/module_picture";
export default {
  components: {
    Card,
  },
  data() {
    return {
      file: "",
      visible: false,
      active: "1",
      modules: "",
      total: "",
      relations: "",
      page: 1,
      size: 6,
    };
  },
  computed: {
    ...mapGetters(["username", "avatar", "intro", "roles"]),
  },
  mounted() {
    getAll().then((res) => {
      this.relations = res.data.relation;
    });
    this.handleClick();
  },
  methods: {
    go() {
      this.$router.push({ path: "/info/editInfo" });
    },

    handleClick(event) {
      if (!event) {
        event = 1;
      } else {
        event = event.$props.name;
      }
      selectModuleByUserIdAndRelationId(this.roles.id, event).then((res) => {
        this.modules = res.data.modules;
        this.total = res.data.total;
        this.getAllUrls()
      });
    },
    onSuccess(res) {
      this.roles.avatar = res.data.url;
      this.$store.dispatch("updateInfo", this.roles).then(() => {});
    },
    uploadAvatar() {
      this.$refs.upload.submit();
      this.visible = false;
    },
    getAllUrls() {
      this.$http
        .all([
          this.modules.forEach((value,index) => {
            getAllPicture(value.id).then((res) => {
              if (res.data.modulePictures[0]) {
                value["url"] = res.data.modulePictures[0].modulePicturepath;
              } else {
                value["url"] = "";
              }
              this.$set(this.modules[index],value)
            });
          }),
        ])
        .then(
          this.$http.spread(() => {
            
            
          })
        );
    },
  },
};
</script>
<style>
#userInfo .info .el-tab-pane {
  padding: 30px;
}
#userInfo .info .el-row {
  border: none;
}

#userInfo .info .username {
  font-weight: 900;
  font-size: 20px;
}

#userInfo .info .container {
  margin-top: 50px;
}
#userInfo .info .editButton {
  cursor: pointer;
  transition: 0.1s ease-in;
  float: right;
}
#userInfo .info .editButton:hover {
  color: #e6a23c;
}
#userInfo .info .imgUploadBtn {
  color: whitesmoke;
  background-color: rgba(3, 2, 3, 0.397);
  position: relative;
  width: 100%;
  display: none;
  z-index: 10;
  font-size: 80px;
  padding-top: 60px;
  padding-bottom: 60px;
  text-align: center;
  cursor: pointer;
}
#userInfo .info .avatar:hover .imgUploadBtn {
  display: inline-block;
}
#userInfo .info .avatar {
  position: relative;
  overflow: hidden;
  width: 200px;
  height: 200px;
  border-radius: 50%;
}
#userInfo .info .avatar img {
  position: absolute;
  left: 0px;
  top: 0px;
  z-index: -1;

  width: 100%;
  height: 100%;
}
#userInfo .info .intro {
 display: flex;
  height: 6rem;
  align-items: flex-end;
}
#userInfo .info .intro >span{ 
  width: 100%;
  height: 3rem;
  padding: .5rem;
  line-height: 3rem;
  border: #E6A23C solid 1px;
  border-radius: 10px;
  transition: 0.3s ease-in-out;
}
#userInfo .info .intro:hover >span{ 
 border: #E6A23C solid 3px;
  
}
</style>